<template>
    <el-breadcrumb :separator-icon="'ArrowRight'">
        <el-breadcrumb-item v-for="(item, index) in props.value">
            <div class="bitem">
                <el-icon :size="12">
                    <component :is="item.icon" />
                </el-icon>
                {{ item.name }}
            </div>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup name="Bread">
const props = defineProps({
    value: {
        required: true,
        type: Array
    }
});
</script>

<style scoped lang="scss">
    .bitem{
        display: flex;
        align-items: center;
        .el-icon{
            margin-right: 4px;
        }
    }
</style>
